// pnpm install --save-dev react-resizable @types/react-resizable

import { useState } from "react";
import { Resizable } from "react-resizable";
import styles from "./index.module.scss"

const ResizableTitle = (props: any) => {
    const { onResize, width, ...rest } = props;
    const [offset, setOffset] = useState(0);

    return (
        <Resizable
            width={Number(width) + Number(offset)}
            height={0}
            handle={
                <span
                    className={styles["react-resizable-handle"]}
                    style={{ transform: `translateX(${offset}px)` }}
                    onClick={(e) => {
                        e.stopPropagation();
                        e.preventDefault();
                    }}
                />
            }
            onResizeStart={() => document.body.onselectstart = () => false}
            onResize={(e: any, { size }) => {
                const minWidth = size.width < 75 ? 75 : size.width;
                setOffset(minWidth - width);
            }}
            onResizeStop={(...arg) => {
                document.body.onselectstart = () => true;
                setOffset(0);
                onResize(...arg);
            }}
            draggableOpts={{ enableUserSelectHack: false }}
        >
            <th {...rest} style={{ overflow: "visible", ...rest.style }}>
                <div style={{ width: "100%", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }}>
                    {...rest.children}
                </div>
            </th>
        </Resizable>
    )
}

export default ResizableTitle;